<template>
  <el-table :data="list" border fit highlight-current-row style="width: 100%">
    <el-table-column
      v-loading="loading"
      align="center"
      label="rid"
      width="65"
      element-loading-text="请给我点时间！"
    >
      <template slot-scope="scope">
        <span>{{ scope.row.id }}</span>
      </template>
    </el-table-column>

    <el-table-column min-width="300px" label="title">
      <template slot-scope="{row}">
        <span>{{ row.title }}</span>
        <el-tag>{{ row.type }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column width="110px" align="center" label="删除">
      <template slot-scope="scope">
        <el-button
          type="danger"
          size="small"
          @click="handleDelete(scope.$index, list)"
        >
          删除
        </el-button>
      </template>
    </el-table-column>

    <el-table-column align="center" label="uid" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.pageviews }}</span>
      </template>
    </el-table-column>

    <el-table-column align="center" label="tid" width="95">
      <template slot-scope="scope">
        <span>{{ scope.row.status }}</span>
      </template>
    </el-table-column>

    <!-- <el-table-column class-name="status-col" label="tid" width="110">
      <template slot-scope="{row}">
        <el-tag :type="row.status | statusFilter">
          {{ row.status }}
        </el-tag>
      </template>
    </el-table-column> -->
  </el-table>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      loading: false
    }
  }
}
</script>
